<template>
  <div>
    <div class="bf-table">
      <!-- <div class="clearfix">
        <div class="float-r">hello world</div>
      </div> -->
      <el-table :data="data.length?data:data.list" style="width: 100%" stripe>
        <el-table-column v-for="item in settingFilter" :key="item.field"
          :prop= "item.field"
          :label= "item.title"
          :width= "item.width"
          :fixed = "item.locked?item.locked:false"
        >
          <template slot-scope="scope">
            <span :title="customCell(scope.row, item)">{{ customCell(scope.row, item) }}</span>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="50px" v-if="rowAction">
          <template slot-scope="scope">
            <el-dropdown @command="showRowList" trigger="click">
              <span class="el-dropdown-link gray">
                <i class="el-icon-more"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <template v-for="action in rowAction" >
                  <el-dropdown-item
                    :key="action.label"
                    v-if="action.hiddenStatus?action.hiddenStatus(scope.row):true"
                    :disabled="action.disableStatus?action.disableStatus(scope.row):false"
                    :command="{label:action.label, click:action.click, scope:scope}"
                  >
                    {{action.label?action.label:action.title}}
                  </el-dropdown-item>
                </template>

                <!-- <el-dropdown-item :command="{type:'detail', scope:scope}">查看</el-dropdown-item>
                <el-dropdown-item :command="{type:'edit', scope:scope}">编辑</el-dropdown-item>
                <el-dropdown-item :command="{type:'delete', scope:scope}">删除</el-dropdown-item> -->
              </el-dropdown-menu>
            </el-dropdown>

          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination-box" v-if="!hiddenPagination">
      <el-pagination
        :current-page="currentPage4"
        :page-sizes="$store.state.beneform4j.pageSizes"
        :page-size="$store.state.beneform4j.pageSize"
        :layout="$store.state.beneform4j.pageLayout"
        :total="data.page?data.page.total:data.meta?data.meta.total:0"
        @size-change = "sizeChange"
        @current-change = "currentChange"
        @prev-click = "prevClick"
        @next-click = "nextClick"
        >
      </el-pagination>
    </div>

    <div>
      <bf-table-edit :width="editFormWidth" :submitButtons="editSubmitButtons" ref="bfTableEdit" :editForm="setting"  @formSubmit="editSubmit" :editRules="editRules"></bf-table-edit>
    </div>
    <div>
      <bf-table-detail :width="detailFormWidth" ref="bfTableDetail" :editForm="setting"></bf-table-detail>
    </div>
    <div>
      <bf-table-search ref="bfTableSearch" :editForm="setting" @formSubmit="editSubmit"></bf-table-search>
    </div>
    <div>
      <bf-table-add ref="bfTableAdd" :editForm="setting" @formSubmit="editSubmit" :editRules="editRules"></bf-table-add>
    </div>
  </div>

</template>

<script>
import { getSelected } from '../api/common'
import store from '@/store'
export default {
  props: ['data', 'setting', 'editRules', 'rowAction', 'hiddenPagination', 'editSubmitButtons', 'editFormWidth', 'detailFormWidth'],
  data() {
    return {
      searchData: '',
      currentPage4: 1,
      pageParams: {
        page: 1,
        pageSize: this.$store.state.beneform4j.pageSize
      },
      tableForm: [],
      tableCol: [],
      dialogVisible: false,
      formType: '', // 记录下表单类型
      deleteData: {},
      paramsKey: {}
    }
  },
  created: function() {
    this.setting.forEach(v => {
      if (v.isParams === true && !v.isHiden) {
        const cacheParams = this.$store.state.params.params
        /**
         * 如果在缓存中，直接获取缓存中数据
         */
        if (!cacheParams[v.paramsId]) {
          if (v._isCache) {
            return
          }
          getSelected(v.paramsId).then((response) => {
            /**
             * 参数缓存
             */
            store.dispatch('addParams', response.data)
          })
          v._isCache = true
        }
      }
    })
  },
  mounted: function() {
    this.tableForm = this.setting
    // console.log(this.data)
  },
  computed: {
    settingFilter: function() {
      return this.setting.filter((v) => {
        if (!v.isHiden) {
          return true
        }
      })
    }
  },
  methods: {
    customCell(row, item) {
      if (item.isParams) {
        const code = item.paramsId
        const cacheParams = this.$store.state.params.params
        if (cacheParams[code]) {
          const list = cacheParams[code]
          const len = list.length
          for (let i = 0; i < len ;i++) {
            const v = list[i]
            if (v.itemCode == row[item.field]) {
              return v.itemText
            }
          }
        } else {
          const isOwnProperty = row.hasOwnProperty(item.field)
          if (isOwnProperty) {
            return row[item.field]
          } else {
            return '--'
          }
          // return row[item.field]?row[item.field]: '--'
        }
      }
      if (item.type === 'selected') {
        if (item.options) {
          const len = item.options.length
          for (let i = 0; i < len ;i++) {
            const v = item.options[i]
            if (v.value == row[item.field]) {
              return v.name
            }
          }
        }
      }
      if (item.formatter) {
        return item.formatter(row)
      }
      if (item.customText) {
        return item.customText(row)
      }

      const isOwnProperty = row.hasOwnProperty(item.field)
      if (isOwnProperty) {
        return row[item.field]
      } else {
        return '--'
      }
      // return row[item.field]?row[item.field]: '--'
    },
    customText(item) {
      // console.log(item.isParams)
      if (item.isParams) {
        this.paramsKey[item.field] = item.paramsId
        return this.formatterParams
      }
      if (item.formatter) {
        return item.formatter
      }
      if (item.customText) {
        return item.customText
      }
    },
    formatterParams(row, column, cellValue, index) {
      // console.log(row, column, cellValue, index)
      const field = column.property
      const code = this.paramsKey[field]
      const cacheParams = this.$store.state.params.params

      // console.log(cacheParams)
      if (cacheParams[code]) {
        const list = cacheParams[code]
        const len = list.length
        for (let i = 0; i < len ;i++) {
          const v = list[i]
          if (v.itemCode == cellValue) {
            return v.itemText
          }
        }
      } else {
        return cellValue
      }
    },
    quickSearch() {
      // console.log(this.searchData)
      this.formType = 'search'
      const params = {
        userId: this.searchData
      }
      this.$emit('search', Object.assign(params, this.pageParams))
    },
    hidenForm() {
      this.$refs.bfTableEdit.hiden()
      this.$refs.bfTableSearch.hiden()
      this.$refs.bfTableAdd.hiden()
    },
    showAdd() {
      this.tableForm = this.setting
      this.formType = 'add'
      this.$refs.bfTableAdd.add()
    },
    showSearch() {
      this.formType = 'search'
      this.$refs.bfTableSearch.search()
    },
    editSubmit(form, editForm) {
      this.$emit('editSubmit', form, this.formType, editForm)
    },
    searchList(params, formList) {
      this.$emit('search', Object.assign(params, this.pageParams), formList, this.pageParams)
    },
    sizeChange(params) {
      this.pageParams.pageSize = params
      this.$emit('pageChange', this.pageParams)
    },
    currentChange(params) {
      this.pageParams.page = params
      this.$emit('pageChange', this.pageParams)
    },
    prevClick(params) {
      this.pageParams.page = params
      this.$emit('pageChange', this.pageParams)
    },
    nextClick(params) {
      this.$emit('pageChange', this.pageParams)
    },
    showEdit(command) {
      this.formType = 'edit'
      this.$refs.bfTableEdit.show(command.scope)
    },
    showDetail(command) {
      this.tableForm = this.setting
      this.$refs.bfTableDetail.showDetail(command.scope)
    },
    showDelete(command) {
      // this.dialogVisible = true
      this.deleteData = command.scope
      this.$confirm('删除该条记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$emit('editSubmit', this.deleteData, 'delete')
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        })
      })
    },
    showRowList(command) {
      command.click(command)
    },
    handleClose() {

    }

  }
}
</script>

<style scoped>
.table-action{
  text-align: center;
}
.pagination-box{
  padding-top: 8px;
  padding-bottom: 16px;
}
.table{
  padding: 0 16px;
}


</style>
